<template>
  <!-- 书架 -->
  <div class="book-shelf">
    <!-- 解决图片有反盗链 -->
    <meta name="referrer" content="never" />

    <van-tabs v-model="active" color="black" sticky animated @click="onClick">
      <!-- 追漫 -->
      <van-tab title="追漫" class="box1" name="追漫">
        <CollectBook></CollectBook>
      </van-tab>
      <!-- 历史 -->
      <van-tab title="历史" class="box1" name="历史">
        <HistoryBook></HistoryBook>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CollectBook from "@/components/CollectBook.vue";
import HistoryBook from "@/components/HistoryBook.vue";
export default {
  data() {
    return {
      active: "",
    };
  },
  components: { CollectBook, HistoryBook },
  // 监听切换类名
  watch: {
    active() {
      let name = window.localStorage.getItem('BookActive')
      if (name) {
        this.active = name;
      }
    }
  },
  methods: {
    onClick(name) {
      this.active = name
      localStorage.setItem("BookActive", name);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-shelf {
  .box1 {
    height: 85vh;
  }
}
</style>